<template>
  <div class="daily-summary">
    <div style="display: flex; justify-content: space-between">
      <div>
        <el-button type="primary" @click="displaySummarize()"
          >上传每日总结</el-button
        >
      </div>

      <!-- 统计分数最高 -->
      <div style="display: flex">
        <el-select
          v-model="dayValue"
          placeholder="选择时间"
          style="width: 120px"
        >
          <el-option
            v-for="item in optionsKty"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button style="margin-left: 10px" type="primary" @click="scopSpt()"
			v-debounce >
			查询
		</el-button>
      </div>
    </div>

    <!-- 用户表格 -->
    <div style="margin-top: 20px"></div>
    <div style="display: flex;height: 91%;">
      <el-table
        :data="tableData"
        border
        style="width: 70%; flex: 3"
        height="100%"
      >
	  <el-table-column prop="i" label="序号" fixed="left" width="50"></el-table-column>
        <el-table-column prop="workTime" label="日期" width="170">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.workTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="80">
        </el-table-column>
        <el-table-column prop="workName" label="工作标题" width="120">
        </el-table-column>
        <el-table-column prop="workInfo" label="工作内容" fit>
          <template slot-scope="scope">
            <span>{{
              scope.row.workInfo.length > 40
                ? scope.row.workInfo.slice(0, 40) + "..."
                : scope.row.workInfo
            }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="penfen(scope.row.workId)"
              >评分</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 用户总分排名 -->
      <div style="margin-left: 100px"></div>
      <el-table
        :data="tableData2"
        border
        style="width: 20%; flex: 1"
        height="100%"
      >
        <el-table-column label="排名" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="姓名" width="110">
        </el-table-column>
        <el-table-column prop="score" label="总分" width="120">
        </el-table-column>
      </el-table>
    </div>

    <!-- 评分管理 -->
    <el-dialog title="用户评分" :visible.sync="display2" width="30%">
      <!-- 评分 -->
      <div class="block">
        <span class="demonstration">给他今天的工作评分吧!</span>
        <div style="margin-top: 20px"></div>

        <el-rate v-model="fraction" :max="10"></el-rate>
      </div>
      <div style="margin: 20px 0"></div>
      用户总结内容:
      <div style="margin-top: 20px"></div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 6, maxRows: 10 }"
        placeholder="总结内容"
        v-model="textarea2"
        disabled
      >
      </el-input>
      <div style="margin: 20px 0"></div>
      <div style="display: flex; justify-content: right">
        <el-button type="primary" @click="submit2" v-debounce>提 交</el-button>
        <el-button type="primary" @click="display2 = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 每日工作总结 -->
    <el-dialog title="每日工作总结" :visible.sync="display1" width="30%">
      <el-input
        v-model="works.workName"
        placeholder="请输入工作内容"
      ></el-input>
      <div style="margin: 20px 0"></div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 6, maxRows: 10 }"
        placeholder="请输入内容"
        v-model="works.workInfo"
      >
      </el-input>
      <div style="margin: 20px 0"></div>

      <div style="display: flex; justify-content: right">
        <el-button type="primary" @click="submit" v-debounce>提 交</el-button>
        <el-button type="primary" @click="display1 = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  addEmployeeProfile,
  selectEmployeeProfileByName,
  devicesSelectList, //查询仓库产品列表
  addUserScore, //通过用户id给用户评分, 不能给自己评分
  addWorkSummary, //给自己添加工作记录
  selectWorkSummaryList, //查询工作记录
  selectUserScoreList, //输入天数查询用户总分列表
} from "../../api/all";
export default {
  components: {},
  data() {
    return {
      works: {
        workId: "",
        userId: "",
        workName: "",
        workTime: "",
        workInfo: "",
        score: "",
      },
      optionsKty: [
        {
          value: "1",
          label: "昨天",
        },
        {
          value: "3",
          label: "3天内",
        },
        {
          value: "7",
          label: "7天内",
        },
        {
          value: "30",
          label: "30天内",
        },
      ],
      dayValue: "1",
      //用户评分id
      userId: "",
      //展示每日工作总结
      display1: false,
      display2: false,
      fraction: 0,
      textarea2: "",
      tableData: [],
      tableData2: [],
    };
  },
  mounted() {
    let kes = window.sessionStorage.getItem("loginUser");
    let userObject = JSON.parse(kes);
    if (userObject.roleType == "root") {
      this.roleType = true;
    }
    console.log("userObject", userObject.roleType);
    this.getAllGoods();
    // console.log("初始化时间:", dayjs())
    //通过入库名称搜索框查询
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  //超级管理员显示功能
  methods: {
    // 格式化时间
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = (d.getMonth() + 1).toString().padStart(2, "0");
      const day = d.getDate().toString().padStart(2, "0");
      const hours = d.getHours().toString().padStart(2, "0");
      const minutes = d.getMinutes().toString().padStart(2, "0");
      const seconds = d.getSeconds().toString().padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      // return `${year}-${month}-${day}`;
    },

    //展示列表
    displaySummarize() {
      this.display1 = true;
    },
    //查询时间段用户总评分
    scopSpt() {
      console.log(this.dayValue);
      selectUserScoreList(this.dayValue).then((res) => {
        this.tableData2 = res.data.map((item,index) =>{
			item.i = index+1;
			return item;
		});
      });
    },
    //点击编辑评分
    penfen(id) {
      this.tableData.forEach((item) => {
        if (item.workId == id) {
          this.textarea2 = item.workInfo;
          this.userId = item.userId;
        }
      });
      this.display2 = true;
    },
    //提交今日总结
    submit() {
      addWorkSummary(this.works).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.display1 = false;
          this.getAllGoods();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //提交评分
    submit2() {
      addUserScore(this.userId, this.fraction).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.message,
          });
          this.display2 = false;
          this.getAllGoods();
        } else {
          this.$message.error(res.message);
        }
      });
      console.log("评分:", this.fraction);
    },

    // 查询列表
    getAllGoods() {
      this.loading = true;
      // getGoodsList(this.currentPage, this.pageSize)
      selectUserScoreList(this.dayValue).then((res) => {
        this.tableData2 = res.data.map((item,index) =>{
			item.i = index+1;
			return item;
		});
      });
      selectWorkSummaryList().then((res) => {
        if (res.code) {
          // this.total = res.data.total;
          this.tableData = res.data.map((item,index) =>{
			  item.i = index+1;
			  return item;
		  });
          //将图片地址放入数组,需要遍历循环加入数组
          // for (let i = 0; i < res.data.devicesVoList.length; i++) {
          //   this.srcList.push(res.data.devicesVoList[i].image);
          // }
          this.loading = false;
        } else {
          this.$message.error("获取列表失败");
        }
      });
    },
    // pageSize变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getAllGoods();
    },
    // 页码变化
    handleCurrentChange(curPage) {
      this.currentPage = curPage;
      this.getAllGoods();
    },
  },
};
</script>

<style scoped>
.page {
  text-align: center;
}

.nameBox {
  overflow: auto; /* 显示滚动条 */
  z-index: 99;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  width: 205px;
  height: 170px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
}

.daily-summary{
	height: 100%;
}

.goods-table {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  margin-top: 10px;
}
.imgUrl {
  width: 100px;
  height: 100px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
.htimg {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持原始宽高比，填充容器 */
}
</style>
